body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    background: #2b4147;
    color: #7a7a7a;
    line-height: 130%;
}

.thermostat {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 100px;
    background: #f2f2f2;
    border-radius: 50%;
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;

    .ring {
        position: absolute;
        width: 180px;
        height: 180px;
        top: 10px;
        left: 10px;
        background: rgb(103, 43, 149);
        background: linear-gradient(
            90deg,
            rgba(103, 43, 149, 1) 0%,
            rgba(206, 46, 95, 1) 100%
        );
        border-radius: 50%;
        box-shadow: inset 2px 4px 4px 0px rgba(0, 0, 0, 0.3);

        .bottom_overlay {
            position: absolute;
            width: 95px;
            height: 95px;
            top: 50%;
            left: 50%;
            background: #f2f2f2;
            transform-origin: 0 0;
            transform: rotate(45deg);
            border-radius: 0 0 95px 0;
        }
    }

    .control {
        position: absolute;
        z-index: 5;
        width: 130px;
        height: 130px;
        top: 35px;
        left: 35px;
        background: #fff;
        border-radius: 50%;
        box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.2);

        .indicator {
            position: absolute;
            width: 1px;
            height: 12px;
            left: 50%;
            top: 0;
            background: #6c6c6c;
            transform-origin: 0 65px;
            transform: rotate(-50deg);
            transition: all 0.5s ease-in-out;
        }

        .temp_outside {
            position: absolute;
            top: 18px;
            left: 6px;
            right: 0;
            text-align: center;
            font-weight: 300;
            font-size: 12px;
        }

        .temp_room {
            position: absolute;
            top: 34px;
            left: 0;
            right: 0;
            text-align: center;
            font-weight: 400;
            font-size: 60px;
            line-height: 60px;
            color: #873183;
            letter-spacing: -8px;
            padding-right: 12px;
            opacity: 1;
            transform: translateX(0);
            transition: all 0.5s ease-in-out;

            span {
                position: absolute;
                top: 0;
                right: 37px;
                font-size: 20px;
                line-height: 34px;
                padding: 0 0 0 7px;
            }

            &.two {
                letter-spacing: -6px;
                padding-right: 2px;
                opacity: 0;
                color: #98317a;
                transform: translateX(50px) scale(0.5);

                span {
                    right: 30px;
                }
            }
        }

        .room {
            position: absolute;
            bottom: 18px;
            left: 0;
            right: 0;
            text-align: center;
            font-weight: 300;
            font-size: 12px;
        }
    }

    &:hover {
        .control {
            .indicator {
                transform: rotate(-20deg);
            }

            .temp_room {
                opacity: 0;
                transform: translateX(-50px) scale(0.5);

                &.two {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        }
    }
}
